<template>
  <div class="home">
    <div class="left">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="setting" />
            组件
          </span>
          <a-collapse accordion :bordered="false">
            <a-collapse-panel key="1" header="容器">
              <p>1</p>
            </a-collapse-panel>
            <a-collapse-panel key="2" header="布局" >
              <p>2</p>
            </a-collapse-panel>
            <a-collapse-panel key="3" header="通用">
              <p>3</p>
            </a-collapse-panel>
          </a-collapse>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

<style scoped>
  .home{
    background-color: #f7f8fa;
  }
  .home .left{
    width: 240px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: 2px 0 4px 0 rgb(29 31 37 / 10%);
  }
  .home .left >>> .ant-tabs-bar{
    margin: 0;
  }
  .home .left >>> .ant-collapse > .ant-collapse-item{
    background-color: #fff;
  }
</style>